<template>
  <a-modal
    v-model:open="visible"
    :mask-closable="false"
    width="40%"
    title="新增"
    :style="{ top: '20px' }"
    :footer="null"
  >
    <div v-if="visible" v-permission="['base-data:shop:add']" v-loading="loading">
      <a-form
        ref="form"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 16 }"
        :model="formData"
        :rules="rules"
      >
        <a-form-item label="编号" name="code">
          <a-input-group compact>
            <a-input
              v-model:value.trim="formData.code"
              style="width: calc(100% - 75px)"
              allow-clear
            />
            <a-button type="primary" @click="onGenerateCode">点此生成</a-button>
          </a-input-group>
        </a-form-item>
        <a-form-item label="名称" name="name">
          <a-input v-model:value="formData.name" allow-clear />
        </a-form-item>
        <a-form-item label="所属部门" name="deptId">
          <sys-dept-selector v-model:value="formData.deptId" :only-final="false" />
        </a-form-item>
        <a-form-item label="地址" name="address">
          <a-input-group compact>
            <a-input v-model:value="formData.address" style="width: calc(100% - 72px)" readOnly />
            <a-tooltip title="选择位置">
              <map-selector
                ref="map"
                v-model:lat="formData.lat"
                v-model:lng="formData.lng"
                v-model:address="formData.address"
                v-model:province="formData.province"
                v-model:city="formData.city"
                v-model:area="formData.area"
              />
            </a-tooltip>
          </a-input-group>
        </a-form-item>
        <a-form-item label="小程序入口" name="mpUrl">
          <a-input v-model:value="formData.mpUrl" allow-clear />
        </a-form-item>
        <a-form-item label="联系电话" name="telephone">
          <a-input v-model:value="formData.telephone" allow-clear />
        </a-form-item>
        <a-form-item label="门店类型" name="type">
          <a-select v-model:value="formData.type" allow-clear>
            <a-select-option
              v-for="item in $enums.SHOP_TYPE.values()"
              :key="item.code"
              :value="item.code"
            >
              {{ item.desc }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="营业日" name="cycleTimeGroup">
          <a-space :size="[0, 8]" wrap>
            <a-checkable-tag
              v-for="(tag, index) in ['周一', '周二', '周三', '周四', '周五', '周六', '周日']"
              :key="index"
              v-model:checked="formData.cycleTimeGroup.days[index]"
            >
              {{ tag }}
            </a-checkable-tag>
          </a-space>
        </a-form-item>
        <a-form-item label="营业时段" name="cycleTimeGroup">
          <a-row>
            <a-col :span="24">
              <a-radio-group
                v-model:value="formData.cycleTimeGroup.type"
                size="small"
                button-style="solid"
              >
                <a-radio-button :value="1">24小时营业</a-radio-button>
                <a-radio-button :value="2">固定时间营业</a-radio-button>
              </a-radio-group>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item label="时段" name="cycleTimeGroup" v-if="formData.cycleTimeGroup.type === 2">
          <div
            style="padding-bottom: 5px"
            v-for="(time, index) in formData.cycleTimeGroup.timeRange"
            :key="index"
          >
            <a-space>
              <a-time-range-picker
                format="HH:mm"
                :value="[
                  time[0] ? dayjs(time[0], 'HH:mm') : null,
                  time[1] ? dayjs(time[1], 'HH:mm') : null,
                ]"
                @change="
                  (values) => {
                    time[0] = dayjs(values[0]).format('HH:mm');
                    time[1] = dayjs(values[1]).format('HH:mm');
                  }
                "
              />
              <a-button @click="() => formData.cycleTimeGroup.timeRange.splice(index, 1)" danger>
                删除
              </a-button>
            </a-space>
          </div>
          <div style="padding-bottom: 5px">
            <a-button
              style="width: 222px"
              @click="
                () => {
                  formData.cycleTimeGroup.timeRange.push([null, null]);
                }
              "
            >添加时段</a-button
            >
          </div>
        </a-form-item>
        <a-form-item label="备注" name="description">
          <a-textarea v-model:value="formData.description" allow-clear />
        </a-form-item>
        <div class="form-modal-footer">
          <a-space>
            <a-button type="primary" :loading="loading" html-type="submit" @click="submit">
              保存
            </a-button>
            <a-button :loading="loading" @click="closeDialog">取消</a-button>
          </a-space>
        </div>
      </a-form>
    </div>
  </a-modal>
</template>
<script>
  import { defineComponent } from 'vue';
  import { validCode } from '@/utils/validate';
  import * as api from '@/api/base-data/shop';
  import { generateCode } from '@/api/components';
  import MapSelector from '@/components/MapSelector';

  export default defineComponent({
    components: {
      MapSelector,
    },
    data() {
      return {
        // 是否可见
        visible: false,
        // 是否显示加载框
        loading: false,
        // 表单数据
        formData: {},
        // 表单校验规则
        rules: {
          code: [{ required: true, message: '请输入编号' }, { validator: validCode }],
          name: [{ required: true, message: '请输入名称' }],
          address: [{ required: true, message: '请输入地址' }],
        },
      };
    },
    computed: {},
    created() {
      // 初始化表单数据
      this.initFormData();
    },
    methods: {
      // 打开对话框 由父页面触发
      openDialog() {
        this.visible = true;

        this.$nextTick(() => this.open());
      },
      // 关闭对话框
      closeDialog() {
        this.visible = false;
        this.$emit('close');
      },
      // 初始化表单数据
      initFormData() {
        this.formData = {
          code: '',
          name: '',
          deptId: '',
          lng: null,
          lat: null,
          province: '',
          city: '',
          area: '',
          address: '',
          description: '',
          mpUrl: '',
          telephone: '',
          type: 1,
          cycleTimeGroup: {
            days: [true, true, true, true, true, true, true],
            type: 1,
            timeRange: [['00:00', '23:59']],
          },
        };
      },
      // 提交表单事件
      submit() {
        this.$refs.form.validate().then((valid) => {
          if (valid) {
            this.loading = true;
            const params = this.formData;
            api
              .create(params)
              .then(() => {
                this.$msg.createSuccess('新增成功！');
                this.$emit('confirm');
                this.visible = false;
              })
              .finally(() => {
                this.loading = false;
              });
          }
        });
      },
      // 页面显示时触发
      open() {
        // 初始化表单数据
        this.initFormData();

        this.onGenerateCode();
      },
      onGenerateCode() {
        generateCode(this.$enums.GENERATE_CODE_TYPE.SHOP.code).then((res) => {
          this.formData.code = res;
        });
      },
    },
  });
</script>
